<template>
  <view class="dashboard-wrap">
    <!-- 卡片1：水质监测指标 -->
    <view class="card-row">
      <view class="card-title-row">出厂水实时水质监测指标</view>
      <view class="card-content-row" v-for="(item) in qualityRows" :key="item.id">
        <view class="row-left">
          <view class="icon-dot"></view>
          <text class="data-label">{{ item.label }}:</text>
        
        </view>
        <view class="row-center">
          <text class="data-value">{{ item.value }}</text>
        </view>
        <view class="row-right" >
           <button class="card-btn-row" @click="goToWaterQualityEcharts(item.id)">曲线图</button>
        </view>
      </view>
    </view>
    <!-- 卡片2：供水统计 -->
    <!-- <view class="card">
      <view class="card-title">供水统计</view>
      <view class="card-divider"></view>

      <view class="card-content-grid">
        <view class="data-block" v-for="(item, i) in supplyRows" :key="i">
          <view class="icon-dot"></view>
          <view class="data-info">
            <text class="data-title">{{ item.label }}</text>
            <text class="data-value">{{ item.value }}</text>
          </view>
        </view>
      </view>
      <button class="card-btn">日供水变化曲线</button>
    </view> -->
    <!-- 卡片3：年度统计 -->
    <!-- <view class="card">
      <view class="card-title">年度统计</view>
      <view class="card-divider"></view>
      <view class="card-content-grid">
        <view class="data-block" v-for="(item, i) in yearRows" :key="i">
          <view class="icon-dot"></view>
          <view class="data-info">
            <text class="data-title">{{ item.label }}</text>
            <text class="data-value">{{ item.value }}</text>
          </view>
        </view>
      </view>
      <button class="card-btn">年度统计曲线</button>
    </view> -->
    <!-- 卡片4：日均统计 -->
    <!-- <view class="card">
      <view class="card-title">日均统计</view>
      <view class="card-divider"></view>
      <view class="card-content-grid">
        <view class="data-block" v-for="(item, i) in avgRows" :key="i">
          <view class="icon-dot"></view>
          <view class="data-info">
            <text class="data-title">{{ item.label }}</text>
            <text class="data-value">{{ item.value }}</text>
          </view>
        </view>
      </view>
      <button class="card-btn">日均供水曲线</button>
    </view> -->
  </view>



<!-- 普通弹窗 -->
  <uni-popup ref="popup" background-color="#fff" @change="change"  type="bottom" borderRadius="20rpx 20rpx 10rpx 10rpx">
      <view class="box-bg">
				<uni-nav-bar shadow left-icon="left"  title="实时曲线" @clickLeft="closeLeft" style="margin-bottom: 15rpx;"/>
			</view>

      <view class="search" >
        				<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby" @click="checkboxClick"></uni-data-checkbox>

      </view>
      <view class="charts-box">
      <qiun-data-charts 
          type="line"
          :opts="opts"
          :chartData="chartData"
          :show="true"
          :reshow="reshow"
      />
    </view>
  </uni-popup>

</template>

<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from "vue";

import { getDeviceLatestByKey,getZxt } from "@/pagesS1/api/deviceinfo";

import qiunDataCharts from "@/pagesS1/components/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"

// 参数
const props = defineProps({
  search: {
    type: Object,
    required: true,
  },
});

// uni-ui 弹出层组件 ref
const popup = ref<{
  open: (type?: any) => void
  close: () => void
}>()

const cccid = ref('');
const goToWaterQualityEcharts = (type: string) => { 
  cccid.value = generateRandomString(16)
  getServerData(type);
  popup.value?.open();

};
const reshow = ref(false);
function generateRandomString(length: number): string {
  reshow.value = true
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}

//
const chartData = ref({});
const opts = ref({
  color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
  padding: [15, 10, 0, 15],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true,
    labelRotate: 90,
    labelSize: 6,
    labelColor: '#666' // 文字颜色
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,


  },
  extra: {
    line: {
      type: "curve",
      width: 2,
      activeType: "hollow",
      linearType: "custom"
    }
  }
});
const dataType = ref('')
const getServerData = async(type: string) => {
 dataType.value = type;
console.log(`--dataType.value----${dataType.value}`);

const resZtx = await getZxt(props.search.deviceKey);

// 定义类型映射关系
const typeMap = {
  wd: { name: "温度", dataKey: "yWdList" },
  zd: { name: "浊度", dataKey: "yZdList" },
  yl: { name: "余氯", dataKey: "yYlList" },
  default: { name: "PH值", dataKey: "yPhList" } // 建议明确默认类型名称
};

// 获取当前类型配置（默认使用default）
const { name, dataKey } = typeMap[type] || typeMap.default;

const res = {
  categories: resZtx.data.XList,
  series: [{
    name,
    lineType: "dash",
    data: resZtx.data[dataKey]
  }]
};
chartData.value = JSON.parse(JSON.stringify(res));
};

// 数据1
const qualityRows = ref([
  { id: '', label: "pH", value: "" },
  { id: '', label: "余氯", value: "" },
  { id: '', label: "浊度", value: "" },
  { id: '', label: "温度", value: "" },
]);
 
onMounted(async () => {
  const res = await getDeviceLatestByKey(props.search.deviceKey)
  qualityRows.value = [
    { id:'ph', label: "PH", value: res.data.payloadPh +' pH'},
    { id:'yl', label: "余氯", value: res.data.payloadYl +' mg/L' },
    { id:'zd', label: "浊度", value: res.data.payloadZd +' NTU'},
    { id:'wd', label: "温度", value: res.data.payloadWd +' ℃'},
  ];
  getServerData(dataType.value);
});




const closeLeft = () => {
  popup.value?.close();
}

const checkbox1 = ref([0]);
const hobby =  ref([{
					text: '足球',
					value: 0
				}, {
					text: '篮球',
					value: 1
				}, {
					text: '游泳',
					value: 2
				}])

const checkboxClick = () => { 
  console.log(checkbox1.value)
}

const type = ref('bottom')
const change = (type: any) => {
  type.value = type
  console.log(type)
}

const chartRef = ref();

const params = ref({
  pageNo: 1,
  pageSize: 10,
  mqttConfigId: "",
});

const supplyRows = [
  { label: "实时供水流量", value: "5.00m³/s" },
  { label: "今日供水量", value: "84.00m³" },
  { label: "本月累计供水量", value: "261.00m³" },
];
const yearRows = [
  { label: "本年累计供水量", value: "261m³" },
  { label: "较上年同比", value: "+4.4%" },
];
const avgRows = [
  { label: "本月日均供水量", value: "8.42m³" },
  { label: "本年日均供水量", value: "0.72m³" },
];
let allRows: any[] = [];
</script>

<style lang="scss" scoped>
.card-row{
    background: #fff;
    pardding: 20rpx;
    border-radius: 10px;
    margin: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1rpx solid #f0f1f2;
  .card-title-row {
    font-weight: bold;
    font-size: 30rpx;
    padding: 20rpx;
    color: #333;
    letter-spacing: 1px;
    text-align: left;
    border-bottom: 1px solid #f5f5f5;
  }
  .card-content-row{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10rpx;
    border-bottom: 1px solid #f0e5e5;
    width: 100%;
    margin: 0 15rpx;
    .row-left{
      width: 20%;
      display: flex;
       justify-content: flex-start;
      align-items: center;
      flex-direction: row;
    }
    .row-center{
      width: 60%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
    }
    .row-right{ 
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: row;

      .card-btn-row {
        border-radius: 6rpx;
        padding: 5rpx 5rpx;
        background: #108ee9;
        color: #fff;
        border: none;
        font-size: 22rpx;
        font-weight: 500;

      }
    }

  }
}


.dashboard-wrap {
  display: flex;
  flex-direction: column;
  /* gap: 10rpx; */
  // padding: 10rpx 8rpx 10rpx 8rpx;
  // align-items: stretch;
  background-color: #f5f5f5;
  // min-height: 100vh;
  // margin-top: 20rpx;
  width: 100%;
}
.card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px #f0f1f2;
    padding: 20rpx 110rpx 5rpx 20rpx;
    margin: 10rpx;
  
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    .card-title {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 10px;
      color: #333;
      letter-spacing: 1px;
      text-align: left;
    }
    .card-content-grid {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px 0;
      margin-bottom: 12px;
    .data-block {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 6px;
      padding: 4px 0 4px 0;
    }

    }

}
.icon-dot {
      width: 12px;
      height: 12px;
      background: #4fc06e;
      border-radius: 2px;
      margin-right: 8px;
  }

.data-info {
  display: flex;
  flex-direction: column;
}
.data-title {
  font-size: 12px;
  color: #333;
  margin-bottom: 2px;
}
.data-label {
  font-size: 16px;
  color: #0d7fcf;
  font-weight: bold;
}
.data-value {
  font-size: 14px;
  color: #108ee9;
}
.card-btn {
    position: absolute;
    right: 20rpx;
    bottom: 35rpx;
    border-radius: 6rpx;
    padding: 8rpx 12rpx;
    background: #108ee9;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px #e6eaf1;
    font-size: 20rpx;
    font-weight: 500;

}
.card-divider {
  width: 100%;
  height: 1px;
  background: #e5e6eb;
  margin: 8px 0 12px 0;
  border: none;
}

.charts-box {
    margin-top: 70rpx;
    width: 100vw;
    height: 70vh;
    margin-bottom: 100rpx ;
}
.popup-content {
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 90vh;
  width: 100vw;
  background-color: #fff;
}

.popup-height {
  width: 200px;
}

.dialog,
.share {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.dialog-box {
  padding: 10px;
}

.dialog .button,
.share .button {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  margin: 0;
  margin-top: 10px;
  padding: 3px 0;
  flex: 1;
}

.dialog-text {
  font-size: 14px;
  color: #333;
}
</style>
